<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>JS Affix</h2>
        <p>The affix plugin toggles between three classes: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. Each class represents a particular state. You must add CSS properties to handle the actual positions, with the exception of <code>position:fixed</code> on the <code>.affix</code> class.</p>
        <p><strong>Tips:</strong> The Affix plugin is often used together with the Scrollspy plugin.</p>

        <h2>Via data-* Attributes</h2>
        <p>Add <code>data-spy="affix"</code> to the element you want to spy on, and the <code>data-offset-top|bottom="number"</code> attribute to calculate the position of the scroll.</p>
        <pre>&lt;ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205"&gt;&lt;/ul&gt;</pre>
        
        <h2>Via JavaScript</h2>
        <p>Enable manually with:</p>
        <pre>$('.nav').affix({offset: {top: 150}});</pre>

        <h2>Affix Options</h2>
        <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>., as in <code>data-offset=""</code>.</p>
        <table>
            <thead>
                <tr><th width="15%">Name</th><th width="15%">Type</th><th width="10%">Default</th><th width="52%">Description</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>offset</td>
                    <td>number | object | function</td>
                    <td>10</td>
                    <td>Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like <code>offset: {top: 25}</code><br><br>For multiple offsets, use <code>offset: {top: 25, bottom: 50}</code><br><br><strong>Tip:</strong> Use a function to dynamically provide an offset (can be useful for responsive designs)<br><br></td>
                </tr>
                <tr>
                    <td>target</td>
                    <td>selector | node | element</td>
                    <td>the window object</td>
                    <td>Specifies the target element of the affix</td>
                </tr>
            </tbody>
        </table>

        <h2>Affix Events</h2>
        <p>The following table lists all available affix events.</p>
        <table>
            <thead>
                <tr><th>Event</th><th>Description</th></tr>
            </thead>
            <tbody>
                <tr><td><code>affix.bs.affix</code></td><td>Occurs before fixed positioning is added to the element<br> (e.g., when the <code>.affix-top</code> class is about to be replaced with the <code>.affix</code> class)<br></td></tr>
                <tr><td><code>affixed.bs.affix</code></td><td>Occurs after fixed positioning is added to the element<br> (e.g., after the <code>.affix-top</code> class is replaced with the <code>.affix</code> class)<br></td></tr>
                <tr><td><code>affix-top.bs.affix</code></td><td>Occurs before the top element returns to its original (non-fixed) position<br> (e.g., the <code>.affix</code> class is about to be repalced with <code>.affix-top</code>)<br></td></tr>
                <tr><td><code>affixed-top.bs.affix</code></td><td>Occurs after the top element returns to its original (non-fixed) position<br> (e.g., the <code>.affix</code> class has been repalced with <code>.affix-top</code>)<br></td></tr>
                <tr><td><code>affix-bottom.bs.affix</code></td><td>Occurs before the bottom element returns to its original (no-fixed) position<br> (e.g., the <code>.affix</code> class is about to be replaced with <code>.affix-bottom</code>)<br></td></tr>
                <tr><td><code>affixed-bottom.bs.affix</code></td><td>Occurs after the bottom element returns to its original (non-fixed) position<br> (e.g., the <code>.affix</code> class has been replaced with <code>.affix-bottom</code>)<br></td></tr>
            </tbody>
        </table>
    </div>

    <script src="//ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
